<script setup lang="ts">
import { ref, watch } from 'vue';
import { sqlStore } from '@/stroe/sql/sql.js';

// 初始化并同步存储中的SQL内容
const sql1 = ref(sqlStore.sql1);
const sql2 = ref(sqlStore.sql2);

// 合并监听逻辑
watch([() => sqlStore.sql1, () => sqlStore.sql2], ([newSql1, newSql2]) => {
  sql1.value = newSql1;
  sql2.value = newSql2;
});

// 初始化发送状态
sqlStore.setSql1IsSend(true);
sqlStore.setSql2IsSend(true);

// 处理输入事件的类型安全方法
const handleSql2Input = (e: Event) => {
  // 类型断言并进行非空判断
  const target = e.target as HTMLTextAreaElement | null;
  if (target) {
    sqlStore.setSql2(target.value);
  }
};
</script>

<template>
  <div class="p-6 max-w-4xl mx-auto bg-white rounded-xl shadow-md">
    <h2 class="text-2xl font-bold text-gray-800 mb-6 flex items-center">
      <i class="fas fa-database mr-3 text-blue-600"></i>
      SQL 管理
    </h2>

    <!-- SQL1 区域 - 只读 -->
    <div class="space-y-3 bg-gray-50 p-4 rounded-lg border border-gray-100 mb-8 transition-all hover:shadow-sm">
      <div class="flex items-center justify-between">
        <label class="font-medium text-gray-700 flex items-center">
          <i class="fas fa-code mr-2 text-gray-500"></i>
          系统生成的SQL
          <span class="ml-2 text-xs bg-gray-200 text-gray-600 px-2 py-0.5 rounded-full">只读</span>
        </label>
        <label class="flex items-center space-x-2 text-gray-600">
          <span>发送</span>
          <input
              type="checkbox"
              v-model="sqlStore.sql1IsSend"
              class="rounded text-blue-600 focus:ring-blue-500 focus:ring-2 transition-all"
          >
        </label>
      </div>
      <textarea
          v-model="sql1"
          class="w-full p-3 bg-gray-50 border border-gray-200 rounded-lg min-h-[120px] text-gray-800 font-mono text-sm resize-none cursor-not-allowed"
          readonly
      ></textarea>
    </div>

    <!-- SQL2 区域 -->
    <div class="space-y-3 bg-gray-50 p-4 rounded-lg border border-gray-100 transition-all hover:shadow-sm">
      <div class="flex items-center justify-between">
        <label class="font-medium text-gray-700 flex items-center">
          <i class="fas fa-comment-alt mr-2 text-gray-500"></i>
          在和AI对话之前你想发什么
        </label>
        <div class="flex items-center space-x-4">
          <button
              @click="() => { sqlStore.setSql2(''); sql2 = ''; }"
              class="text-sm text-blue-600 hover:text-blue-800 hover:underline transition-colors flex items-center"
          >
            <i class="fas fa-trash-alt mr-1"></i>
            清空
          </button>
          <label class="flex items-center space-x-2 text-gray-600">
            <span>发送</span>
            <input
                type="checkbox"
                v-model="sqlStore.sql2IsSend"
                class="rounded text-blue-600 focus:ring-blue-500 focus:ring-2 transition-all"
            >
          </label>
        </div>
      </div>
      <textarea
          v-model="sql2"
          class="w-full p-3 border border-gray-300 rounded-lg min-h-[120px] text-gray-800 font-mono text-sm resize-y focus:border-blue-400 focus:ring-1 focus:ring-blue-400 transition-all outline-none"
          @input="handleSql2Input"
          placeholder="请输入你想发送的内容..."
      ></textarea>
    </div>
  </div>
</template>

<style scoped>
/* 引入Font Awesome图标库 */
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css");

/* 样式部分保持不变 */
.flex { display: flex; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.space-x-2 > * + * { margin-left: 0.5rem; }
.space-x-4 > * + * { margin-left: 1rem; }
.space-y-3 > * + * { margin-top: 0.75rem; }
.p-3 { padding: 0.75rem; }
.p-4 { padding: 1rem; }
.p-6 { padding: 1.5rem; }
.mb-6 { margin-bottom: 1.5rem; }
.mb-8 { margin-bottom: 2rem; }
.text-sm { font-size: 0.875rem; }
.text-xs { font-size: 0.75rem; }
.text-2xl { font-size: 1.5rem; }
.font-bold { font-weight: 700; }
.font-medium { font-weight: 500; }
.font-mono { font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace; }
.rounded-lg { border-radius: 0.5rem; }
.rounded-xl { border-radius: 0.75rem; }
.rounded-full { border-radius: 9999px; }
.border { border-width: 1px; }
.border-gray-100 { border-color: #f3f4f6; }
.border-gray-200 { border-color: #e5e7eb; }
.border-gray-300 { border-color: #d1d5db; }
.border-blue-400 { border-color: #93c5fd; }
.text-gray-500 { color: #6b7280; }
.text-gray-600 { color: #4b5563; }
.text-gray-700 { color: #374151; }
.text-gray-800 { color: #1f2937; }
.text-blue-600 { color: #2563eb; }
.text-blue-800 { color: #1e40af; }
.bg-white { background-color: #ffffff; }
.bg-gray-50 { background-color: #f9fafb; }
.bg-gray-200 { background-color: #e5e7eb; }
.hover\:underline:hover { text-decoration: underline; }
.min-h-\[120px\] { min-height: 120px; }
.w-full { width: 100%; }
.max-w-4xl { max-width: 56rem; }
.mx-auto { margin-left: auto; margin-right: auto; }
.shadow-md { box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); }
.hover\:shadow-sm:hover { box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); }
.mr-1 { margin-right: 0.25rem; }
.mr-2 { margin-right: 0.5rem; }
.mr-3 { margin-right: 0.75rem; }
.px-2 { padding-left: 0.5rem; padding-right: 0.5rem; }
.py-0\.5 { padding-top: 0.125rem; padding-bottom: 0.125rem; }
.resize-none { resize: none; }
.resize-y { resize: vertical; }
.cursor-not-allowed { cursor: not-allowed; }
.transition-all { transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); }
.transition-colors { transition: color, background-color, border-color 150ms cubic-bezier(0.4, 0, 0.2, 1); }
.focus\:ring-1:focus { box-shadow: 0 0 0 1px #93c5fd; }
.focus\:ring-2:focus { box-shadow: 0 0 0 2px #3b82f6; }
.outline-none { outline: 2px solid transparent; outline-offset: 2px; }
</style>
